<template>
  <!-- 新契约工作列表模块-end单 -->
  <div class="fillcontain">
    <!-- 查询表单 -->
        <el-form  :model="searchParams"  ref="ruleForm" label-width="120px"
                 class="search_container">
          <el-row>
            <el-col :span="6">
              <el-form-item label="规则组名称" prop="groupName">
                <el-input clearable v-model="searchParams.groupName" placeholder="规则组名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规则组编码" prop="groupIdentify">
                <el-input clearable v-model="searchParams.groupIdentify" placeholder="规则组编码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="text_center">
              <el-button type="primary" size="mini" icon="el-icon-search" @click="search" ></el-button>
              <el-button type="primary" size="mini" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
            </el-col>
          </el-row>

        </el-form>

    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="info" plain size="mini" style="margin-left: 10px;" @click="createContent">生成上线内容</el-button>
        </el-col>
      </el-row>
      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
                  highlight-current-row header-cell-class-name="table-header-class"
                  empty-text="无符合查询条件任务"
                  style="width:100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column property="groupName" label="规则组名称" align='center' show-overflow-tooltip
                           min-width="120"></el-table-column>
          <el-table-column property="groupIdentify" label="规则组标识" align='center' show-overflow-tooltip
                           min-width="80"></el-table-column>
          <el-table-column property="groupVersion" label="规则组版本" align='center' show-overflow-tooltip
                           min-width="80"></el-table-column>
          <el-table-column property="lastUpdateId" label="操作人" align='center' show-overflow-tooltip
                           min-width="100"></el-table-column>
          <el-table-column property="lastUpdateTime" label="操作时间" :formatter="dateFormat" align='center' show-overflow-tooltip
                           min-width="150"></el-table-column>
          <el-table-column property="auditUserId" label="审核人" align='center' show-overflow-tooltip
                           min-width="100"></el-table-column>
          <el-table-column property="auditTime" label="审核时间" :formatter="dateFormat" align='center' show-overflow-tooltip
                           min-width="150"></el-table-column>
          <el-table-column property="onlineEnvironment" label="上线环境"  align='center' show-overflow-tooltip :formatter="onlineName"
                           min-width="150"></el-table-column>
          <el-table-column property="" label="操作" align='center' show-overflow-tooltip min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="showOnlineDia(scope.row)">上线</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
                            <el-pagination
                              background
                              v-if='paginations.total > 0'
                              :page-sizes="paginations.pageSizes"
                              :page-size="paginations.pageSize"
                              :layout="paginations.layout"
                              :total="paginations.total"
                              :current-page='paginations.pageIndex'
                              @current-change='handleCurrentChange'
                              @size-change='handleSizeChange'>
                            </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog
      title="选择环境"
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="showOnline">
      <el-row>
        <el-table
          ref="onlineTable"
          :data="envList"
          style="width: 100%; ">
          <el-table-column type="selection" :selectable="selectDisable"></el-table-column>
          <el-table-column
            prop="environmentName"
            header-align="center"
            align="center"
            width="180"
            label="环境名称">
          </el-table-column>
          <el-table-column
            prop="environmentUrl"
            header-align="center"
            align="center"
            label="url">
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="mt10 text_center">
        <el-button type="primary" @click="online">上线</el-button>
        <el-button @click="hideOnlineDia">取消</el-button>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
  import { rulePage, onlineRule } from '@/api/version/version'
  import constant from '@/api/constant'
  import {listData} from '@/api/baseConfig/environment'
  import http from '@/utils/fileRequest'

  export default {
    components: {},
    data () {
      return {
          loading:false,
        tableData:[],
        searchParams: {
          // 规则组名称
          groupName: '',
          groupIdentify: '',
          pageSize: '',
          pageNumber: '',
          auditStatus: '2'
        },
        showOnline: false,
        envList: [],
        onlineRule: {},
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 20,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
      }
    },
    created () {
      this.getList()
    },
    activated () {
      this.getList()
      this.initData()
    },
    mounted () {

    },
    methods: {
        createContent(){
            if(this.$refs.multipleTable.selection.length<=0){
                this.$message.error("请选择要上线的规则组信息")
                return
            }
            let arr = []
            this.$refs.multipleTable.selection.forEach(item => {
                arr.push(item.id)
            })
            // console.log(JSON.stringify(arr))

            let url = constant.DR +"/online/publish/downGroup"
            let params = {id:JSON.stringify(arr)}
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            http.post(url,params).then(fileData=>{
                const url = window.URL.createObjectURL(new Blob([fileData]))
                const link = document.createElement('a')
                link.href = url
                link.setAttribute('download', 'group.txt') // 下载文件的名称及文件类型后缀
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link); // 下载完成移除元素
                window.URL.revokeObjectURL(url); // 释放掉blob对象
                this.$store.dispatch('loading/CHANGE_LOADING', false)
            }).catch(err=>{
                this.$store.dispatch('loading/CHANGE_LOADING', false)
            })
        },
      search () {
        this.paginations.pageIndex = 1
        this.getList()
      },
      getList () {
        this.paginations.total = 0
        this.tableData = []
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        this.searchParams.pageNumber = this.paginations.pageIndex
        this.searchParams.pageSize = this.paginations.pageSize
        rulePage(this.searchParams).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.data.resultCode == constant.SUCCESS && res.data.data && res.data.data.list.length) {
            this.paginations.total = res.data.data.total
            this.tableData = res.data.data.list
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
        })
      },
      initData() {
        listData({}).then(res => {
          this.envList = res.data.data
        })
      },
      showOnlineDia(row) {
        this.onlineRule = row
        this.showOnline = true
      },
      hideOnlineDia() {
        this.onlineRule = {}
        this.showOnline = false
      },
      selectDisable(row, index) {
        let flag = true
        if (this.onlineRule.onlineEnvironment != undefined && this.onlineRule.onlineEnvironment != '') {
          let arr = JSON.parse(this.onlineRule.onlineEnvironment)
          for (let i = 0; i < arr.length; i++) {
            if (row.environmentCode == arr[i].environmentCode){
              flag = false
              return flag
            }
          }
        }
        return flag
      },
      online() {
        let data = {identify: this.onlineRule.groupIdentify, version: this.onlineRule.groupVersion}
        let arr = []
        this.$refs.onlineTable.selection.forEach(item => {
          arr.push({environmentCode: item.environmentCode, environmentName: item.environmentName})
        })
        if (arr.length > 1) {
          this.$message.error('一次只能上线一个环境')
          return
        }
        data.environmentList = arr
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        onlineRule(data).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
            debugger
          if (res.data.resultCode == constant.SUCCESS) {
            this.$message.success('上线成功')
            this.showOnline = false
            this.getList()
          } else {
            this.$message.error(res.data.resultMsg)
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
        })
      },
      // 清除查询条件
      resetSearch () {
        this.searchParams.groupName = ''
        this.searchParams.groupIdentify = ''
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      dateFormat(row,column){
        return constant.dateFormat('YYYY-mm-dd HH:MM:SS', row.lastUpdateTime)
      },
      onlineName(row, column) {
        let name = ''
        if (row.onlineEnvironment != undefined && row.onlineEnvironment != '') {
          let arr = JSON.parse(row.onlineEnvironment)
          for (let i = 0; i < arr.length; i++) {
            name = name + arr[i].environmentName
            if (i != arr.length - 1) {
              name = name + '|'
            }
          }
        }
        return name
      }
    },
    watch: {},
    computed: {}

  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }

      .fastQuery_item {
        margin: 0 10px;
      }

      .item_default {
        .el-button {
          color: #409EFF !important;
          border-color: #c6e2ff !important;
          background-color: #ecf5ff !important;
        }

      }

      .moreCondition {
        color: #68a3fc;
        cursor: pointer;
        padding: 6px 0px;

        .el-icon-d-arrow-right {
          transform: rotate(90deg);
        }

        .el-icon-d-arrow-left {
          transform: rotate(-90deg);
        }
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }

  .search_container {
    padding: 20px 20px 0 20px;
  }

  .el-dropdown {
    vertical-align: top;
  }

  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>



